<script setup lang="ts">
interface Props {
  size?: number
}

const props = withDefaults(defineProps<Props>(), {
  size: 64
})
</script>

<template>
  <svg
    :width="size"
    :height="size"
    viewBox="0 0 64 64"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="announcement-icon"
  >
    <!-- 喇叭主体 -->
    <path
      d="M12 20L30 12V52L12 44V20Z"
      fill="url(#announcement-gradient-1)"
    />
    <!-- 喇叭口 -->
    <ellipse
      cx="11"
      cy="32"
      rx="7"
      ry="12"
      fill="url(#announcement-gradient-2)"
    />
    <!-- 喇叭扩音部分 -->
    <path
      d="M30 16L48 8C50 8 52 10 52 12V52C52 54 50 56 48 56L30 48V16Z"
      fill="url(#announcement-gradient-3)"
    />
    <!-- 音波1 -->
    <path
      d="M56 20C58 22 58 26 56 28"
      stroke="#FFD700"
      stroke-width="3"
      stroke-linecap="round"
    />
    <!-- 音波2 -->
    <path
      d="M58 14C62 18 62 30 58 34"
      stroke="#FFD700"
      stroke-width="3"
      stroke-linecap="round"
    />

    <!-- 渐变定义 -->
    <defs>
      <linearGradient id="announcement-gradient-1" x1="12" y1="12" x2="30" y2="52" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#4facfe" />
        <stop offset="100%" stop-color="#00f2fe" />
      </linearGradient>
      <linearGradient id="announcement-gradient-2" x1="4" y1="20" x2="18" y2="44" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#7ee8fa" />
        <stop offset="100%" stop-color="#4facfe" />
      </linearGradient>
      <linearGradient id="announcement-gradient-3" x1="30" y1="8" x2="52" y2="56" gradientUnits="userSpaceOnUse">
        <stop offset="0%" stop-color="#00f2fe" />
        <stop offset="100%" stop-color="#4facfe" />
      </linearGradient>
    </defs>
  </svg>
</template>

<style scoped>
.announcement-icon {
  filter: drop-shadow(0 4px 8px rgba(79, 172, 254, 0.3));
  transition: transform 0.3s ease;
}

.announcement-icon:hover {
  transform: scale(1.05) rotate(-5deg);
}
</style>
